<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
<div id="div1">
    <label v-for="(item,index) in this.interests" :key="index">
        <input type="checkbox" :value="item" v-model="interest" @change="handlerChange">{{item}}
    </label>
    <div>
        {{interest}}
    </div>
</div>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#div1',
        data: {
            count: "1",
            interests: ['movie', 'shopping', 'swimming', 'music','eat'],
            interest: ['shopping']
        },
        computed: {},
        filters: {},
        watch: {
            interest(){
                if (this.interest.length>3){
                    console.log(123)
                }
            }
        },
        created() {
        },
        mounted() {
        },
        beforeDestroy() {
        },
        methods: {
            handlerChange(e){
                if (this.interest.length>3){
                    this.interest.pop();
                    e.target.checked = false
                }
            }
        }
    })
</script>
</body>
</html>